<template>
  <div class="home">
    <header-top></header-top>
    <nav class="city_nav">
      <div class="city_tip">
        <span>当前定位城市:</span>
        <span>定位不准时, 请在城市列表中选择</span>
      </div>
      <router-link :to="'/city/' + cityId" class="city_current">
        <span>{{ currentCity }}</span>
        <svg class="arrow_right">
          <use
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xlink:href="#arrow-right"
          ></use>
        </svg>
      </router-link>
      <div class="city_hot">
        <h3>热门城市</h3>
        <ul class="hot_box">
          <router-link
          class="rt_li"
            tag="li"
            :to="'/city/' + item.id"
            v-for="item in hotCities"
            :key="item.id"
          >
            {{ item.name }}
          </router-link>
        </ul>
      </div>
      <div class="all_city">
        <ul class="city_group">
          <li
            v-for="(value, key, index) in allCities"
            :key="key"
            class="city_box"
          >
            <h4>{{ index === 0 ? key + "( 按字母排序 )" : key }}</h4>
            <ul class="city_special">
              <li
                v-for="(item, index) in value"
                :key="index"
                class="city_special_li"
              >
                {{
                  item.name && item.name.length > 5
                    ? item.name.substring(0, 5) + "..."
                    : item.name
                }}
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import headerTop from "@/components/header/head.vue"; // @ is an alias to /src
import { cityGuess } from "@/api/getData";

@Options({
  components: {
    HelloWorld,
    headerTop,
  },
})
export default class Home extends Vue {
  // 热门城市
  hotCities = [];
  // 所有城市
  allCities = {};
  // 当前定位城市名
  currentCity = ref("");
  cityId = ref(21);
  objKeySort(obj: any) {
    //排序的函数
    // 我们先定义一个对象的属性，需要注意的是我们使用接口interface定义对象时，接口的首字母最好是大写
    interface City {
      [propName: string]: any;
    }
    var newkey: Array<string> = Object.keys(obj).sort(); //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
    var newObj: City = {}; //创建一个新的对象，用于存放排好序的键值对
    for (var i = 0; i < newkey.length; i++) {
      //遍历newkey数组
      if (typeof newkey == "object") {
        newObj[newkey[i]] = obj[newkey[i]];
      }
    }
    return newObj; //返回排好序的新对象
  }
  // 获取城市数据
  getCities() {
    cityGuess({ type: "hot" })
      .then((res) => {
        this.hotCities = res;
      })
      .catch((err) => {
        console.log(err);
      });
    cityGuess({ type: "guess" })
      .then((res) => {
        this.currentCity = res.name;
        this.cityId = res.id;
      })
      .catch((err) => {
        console.log(err);
      });
    cityGuess({ type: "group" })
      .then((res) => {
        this.allCities = this.objKeySort(res);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  created() {
    this.getCities();
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";

.home {
  padding-top: 1.95rem;
  .city_nav {
    padding-top: 0.4rem;
    .city_tip {
      background-color: #fff;
      @include fj;
      @include wh(100%, 1.5rem);
      line-height: 1.5rem;
      padding: 0 0.4rem;

      // border-top: 1px solid $bc;

      span {
        @include sc(0.5rem, #666);
        height: 100%;
        line-height: 1.5rem;

        + span {
          @include sc(0.475rem, #9f9f9f);
          font-weight: 900;
        }
      }
    }
    .city_current {
      background-color: #fff;
      @include fj;
      align-items: center;
      height: 1.7rem;
      text-align: left;
      border-top: 1px solid $bc;
      border-bottom: 2px solid $bc;
      padding: 0 0.4rem;
      box-shadow: 1px 1px 1px $bc;
      span {
        @include sc(0.7rem, $blue);
      }
      .arrow_right {
        @include wh(0.6rem, 0.6rem);
        fill: #999;
      }
    }
    .city_hot {
      background-color: #fff;
      margin-top: 0.45rem;
      border-top: 2px solid $bc;
      // border-bottom: 1px solid $bc;
      h3 {
        font-size: 0.5rem;
        text-align: left;
        padding: 0 0.4rem;
        color: #666;
        font-weight: 400;
        height: 1.6rem;
        line-height: 1.6rem;
        border-bottom: 1px solid $bc;
      }
      .hot_box {
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;

        li,.rt_li {
          @include sc(0.5rem, $blue);
          width: 25%;
          height: 1.5rem;
          line-height: 1.5rem;
          @include border;
        }
      }
    }
    .all_city {
      background-color: #fff;

      .city_group {
        .city_box {
          margin-top: 0.45rem;
          border-top: 2px solid $bc;
          border-bottom: 1px solid $bc;
          h4 {
            @include sc(0.6rem, #666);
            text-align: left;
            padding: 0 0.4rem;
            font-weight: 400;
            height: 1.5rem;
            line-height: 1.5rem;
            border-bottom: 1px solid $bc;
          }
          .city_special {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .city_special_li {
              width: 25%;
              height: 1.5rem;
              line-height: 1.5rem;
              @include sc(0.5rem, #666);
              @include border;
            }
          }
        }
      }
    }
  }
}
</style>
